import React from 'react'
import { Delete ,} from '@react-vant/icons';
import { Toast, NavBar,SubmitBar, Checkbox,ProductCard, Tag, Button ,Badge} from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import { STORETYPE } from '../../Type/Store.d';
import { PREVBTN ,NEXTBTN,INPBTN,ALLINPFLAG }from '../../Type/SotreItem.d';

function Shop() {
    const Navigate = useNavigate();
    const Dispatch = useDispatch();

    const shopList = useSelector((state:STORETYPE) => state.shopList);

    return (
        <div className='Shop'>
            <NavBar
                title="购物车列表"
                rightText={ <Badge content={useSelector((state:STORETYPE)=>state.shopList.filter(item => item.inpFlag == true).length)}><Delete  fontSize={25} /></Badge>}
                onClickRight={() => Toast('按钮')}
            />
            <main>
                {
                    shopList && shopList.length >=0 ? shopList.map((item,index)=>{
                        return <ProductCard key={index}
                                    num={item.count}
                                    price={item.price * item.count}
                                    desc={item.con}
                                    title={item.txt}
                                    thumb={
                                        <>
                                            <input type="checkbox" checked={item.inpFlag} onChange={()=>{
                                                Dispatch({
                                                    type:INPBTN,
                                                    payload:item.id,
                                                })
                                            }}/>
                                            <img src={item.src} alt="" />
                                        </>
                                    }
                                    footer={
                                    <>
                                        <Button size="mini" round plain style={{ marginRight: 10,padding:10 }} onClick={()=>{
                                            Dispatch({
                                                type:PREVBTN,
                                                payload:item.id,
                                            })
                                        }}>-</Button>
                                        <Button size="mini" round plain style={{ padding:10 }} onClick={()=>{
                                            Dispatch({
                                                type:NEXTBTN,
                                                payload:item.id,
                                            })
                                        }}>+</Button>
                                    </>
                                    }
                                />
                    }):'暂无数据'
                }
            </main>
            <footer>
                <SubmitBar
                    price={useSelector((state:STORETYPE)=>state.SumPrice) as number * 100}
                    buttonText="提交订单"
                    tip={
                        <>
                        你的收货地址不支持同城送,
                        <span style={{ color: '#1989fa' }}>修改地址</span>
                        </>
                    }
                    >
                    <Checkbox checked={useSelector((state:STORETYPE)=>state.AllInpFlag)} onChange={(e)=>{
                        Dispatch({
                            type:ALLINPFLAG,
                            payload:e,
                        })
                    }}>全选</Checkbox>
                </SubmitBar>
            </footer>
        </div>
    )
}

export default Shop